<template> 
	<div>
		<div @click="handleBannerClick"  class="header">
			<img class="head-img" :src="bannerImg">
			<div class="icon-img">&#xe663;</div>
			<div class="head-info">{{sightName}}</div>
		</div>
		<fade-animation>
			<Gallary
			v-if="gallaryShow"
			:imgs="gallaryImgs"
			@close="handleGallaryClose"
			></Gallary>
		</fade-animation>
		
	</div>
</template> 
<script> 
	import Gallary from '@/common/gallary/gallary'
	import FadeAnimation from '@/common/fade/FadeAnimation'

	export default { 
		components:{
			Gallary,
			FadeAnimation
		},
		name:"Banner",
		props:{
			sightName:String,
			bannerImg:String,
			gallaryImgs:Array,
			list:Array
		},
		data () { 
			return { 
				gallaryShow:false,
				imgs:['//img1.qunarzz.com/sight/p0/2001/f6/f66fb64d494a4d78a3.img.jpg_600x330_5271cd17.jpg','//img1.qunarzz.com/sight/p0/1604/21/219fc64776b40b4490.img.jpg_600x330_f15aae57.jpg']

			}; 
		}, 
		methods: { 
			handleBannerClick(){
				this.gallaryShow=true

			},
			handleGallaryClose(){
				this.gallaryShow=false
			}
		},
		mounted(){

		}
	}; 
</script> 

<style scoped> 
.header{
 background: white;
 display: flex;
 /*color: white;*/
 position: relative;
}
.head-img{
  max-width: 100%;
}
.icon-img{
  position: absolute;
  bottom: 25px;
  left: 5px;
}
.head-info{
  color: white;
  position: absolute;
  bottom: 5px;
  left: 5px;
  z-index: 1;
  font-size: 18px;
}
</style> 